<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
    <div class="info-container">
      <div class="info-item" @mouseover="highlightSection(0)" @mouseout="resetHighlight">
        <div class="icon normal-icon"></div>
        <span>正常设备: {{ normalEquipment }}</span>
      </div>
      <div class="info-item" @mouseover="highlightSection(1)" @mouseout="resetHighlight">
        <div class="icon alarm-icon"></div>
        <span>报警设备: {{ alarmEquipment }}</span>
      </div>
      <div class="info-item" @mouseover="highlightSection(2)" @mouseout="resetHighlight">
        <div class="icon offline-icon"></div>
        <span>离线设备: {{ offlineEquipment }}</span>
      </div>
      <div class="info-item" @mouseover="highlightSection(3)" @mouseout="resetHighlight">
        <div class="icon fault-icon"></div>
        <span>故障设备: {{ faultEquipment }}</span>
      </div>
      <div class="info-item" @mouseover="highlightSection(4)" @mouseout="resetHighlight">
        <div class="icon unable-icon"></div>
        <span>未启用设备: {{ unableEquipment }}</span>
      </div>
    </div>
  </div>
</template>



<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { getsystem } from '@/api/echarts'
export default {
  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    }
  },
  created() {
    getsystem().then(res => {
      this.normalEquipment = res.msg.normalEquipment
      this.alarmEquipment = res.msg.alarmEquipment
      this.offlineEquipment = res.msg.offlineEquipment
      this.faultEquipment = res.msg.faultEquipment
      this.unableEquipment = res.msg.unableEquipment
      this.getEchartRight();
    })
  },
  methods: {
  getEchartRight() {
    let myChart = echarts.init(document.getElementById('chart_right2'));
    let option = {
      color: ['#00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00'],
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      polar: {},
      angleAxis: {
        interval: 1,
        type: 'category',
        data: [],
        z: 10,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0B4A6B',
            width: 5,
            type: 'solid'
          },
        },
        axisLabel: {
          interval: 0,
          show: true,
          color: '#0B4A6B',
          margin: 8,
          fontSize: 16
        },
      },
      radiusAxis: {
        min: 40,
        max: 120,
        interval: 20,
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0B3E5E',
            width: 1,
            type: 'solid'
          },
        },
        axisLabel: {
          formatter: '{value} %',
          show: false,
          padding: [0, 0, 20, 0],
          color: '#0B3E5E',
          fontSize: 16
        },
        splitLine: {
          lineStyle: {
            color: '#0B3E5E',
            width: 2,
            type: "solid"
          }
        }
      },
      series: [
        {
          type: 'pie',
          radius: ['6%', '10%'],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 50
            },
            emphasis: {
              show: false
            }
          },
          tooltip: {
            show: false
          },
          data: [{
            name: '',
            value: 0,
            itemStyle: {
              normal: {
                color: '#0B4A6B'
              }
            }
          }]
        },
        {
          type: 'pie',
          radius: ['90%', '95%'],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 50
            },
            emphasis: {
              show: false
            }
          },
          tooltip: {
            show: false
          },
          data: [{
            name: '',
            value: 0,
            itemStyle: {
              normal: {
                color: '#0B4A6B'
              }
            }
          }]
        },
        {
          stack: 'a',
          type: 'pie',
          radius: ['20%', '80%'],
          roseType: 'area',
          zlevel: 10,
          label: {
            normal: {
              show: true,
              formatter: '{b}: {c}', // 保留类别名称和值
              textStyle: {
                fontSize: 15,
              },
              position: 'outside'
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 15,
              length2: 50,
              lineStyle: {
                type: 'dotted'
              }
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              borderColor: '#fff',
              borderWidth: 2,
              color: (params) => {
                const colors = [
                  { offset: 0, color: '#00FFBF' },
                  { offset: 1, color: '#FF007F' },
                  { offset: 0.5, color: '#8F00FF' },
                  { offset: 0, color: '#FF6F61' },
                  { offset: 1, color: '#DFFF00' }
                ];
                return new echarts.graphic.LinearGradient(0, 0, 1, 1, [colors[params.dataIndex]]);
              }
            }
          },
          data: [
            { value: this.normalEquipment, name: '正常' },
            { value: this.alarmEquipment, name: '报警' },
            { value: this.offlineEquipment, name: '离线' },
            { value: this.faultEquipment, name: '故障' },
            { value: this.unableEquipment, name: '未启用' }
          ]
        }
      ]
    };

    this.myChart = myChart;
    myChart.setOption(option, true);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  },
  highlightSection(index) {
    this.myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: index
    });
  },
  resetHighlight() {
    this.myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    });
  }
}

};
</script>

<style lang="scss" scoped>
.distribution-container {
  .chart {
    height: 20vh;
  }
}
</style>
